<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th v-if="showSelect" class="table-checkbox">
        <input
          type="checkbox"
          :disabled="data.length <= 0"
          @click="selectedAll"
          :checked="data.length == selected.length && data.length > 0"
        />
      </th>
      <template v-for="(item, index) in slots">
        <th
          :key="index"
          v-if="item.componentInstance&&item.componentInstance.if"
          :style="{ width: item.componentInstance.width }"
          v-bind="item.componentInstance.$attrs"
          :class="item.componentInstance.headClass"
        >
          <template v-if="item.componentInstance.$slots.head">
            <kb-table-column
              :customSlot="item.componentInstance.$slots.head"
            ></kb-table-column>
          </template>
          <template v-else>
            {{ item.componentInstance.label }}
          </template>
        </th>
      </template>
    </tr>
  </thead>
  <tbody v-if="data.length+progressorRows.length > 0">
    <tr v-for="(row, rowIndex) in data" :key="rowIndex" @click="selectRow(row)">
      <td v-if="showSelect" class="table-checkbox">
        <input type="checkbox" :checked="itemIsSelected(row)" />
      </td>
      <template v-for="(item, index) in slots">
        <td
          v-if="item.componentInstance&&item.componentInstance.if"
          :key="index"
          :style="{ textAlign: item.componentInstance.align }"
          :class="item.componentInstance.bodyClass"
        >
          <template v-if="item.componentInstance.prop">
            {{ row[item.componentInstance.prop] }}
          </template>
          <template v-else>
            <kb-table-column
              :key="rowIndex+'_'+index"
              :customSlot="item.componentInstance.$scopedSlots.default(row)"
            ></kb-table-column>
          </template>
        </td>
      </template>
    </tr>
    <tr v-for="(item,index) in progressorRows">
      <td v-if="showSelect" class="table-checkbox">
        <input type="checkbox" :checked="false" />
      </td>
      <td>{{item.name}}</td>
      <td colspan="10000">
        <kb-upload-progressor
          :percentage="item.uploadPercentage"
        ></kb-upload-progressor>
      </td>
    </tr>
  </tbody>
  <template v-else>
    <tbody v-if="!hideEmpty">
      <tr>
        <td :colspan="100" class="text-center"
          >{{ Kooboo.text.common.empty }}</td
        >
      </tr>
    </tbody>
  </template>

  <div v-show="false">
    <slot v-slot:head></slot>
  </div>
</table>